<!-- 分栏布局 -->
<script setup lang="ts" name="layoutColumns">
import { useRoute, useRouter } from 'vue-router'
import { useGlobalStore, useRouteStore } from '@/stores'
import { getStrWidth } from '@/utils'

const Main = defineAsyncComponent(() => import('@/layouts/components/Main/index.vue'))
const ToolBarLeft = defineAsyncComponent(() => import('@/layouts/components/Header/ToolBarLeft.vue'))
const ToolBarRight = defineAsyncComponent(() => import('@/layouts/components/Header/ToolBarRight.vue'))
const SubMenu = defineAsyncComponent(() => import('@/layouts/components/Menu/SubMenu.vue'))
const HeaderWrap = defineAsyncComponent(() => import('@/layouts/components/Header/HeaderWrap.vue'))
const Logo = defineAsyncComponent(() => import('@/layouts/components/Header/components/Logo.vue'))

const route = useRoute()
const router = useRouter()
const authStore = useRouteStore()
const globalStore = useGlobalStore()
const { isCollapse, isDarkMenu } = toRefs(globalStore)
const { menuList } = toRefs(authStore)
const activeMenu = computed(() => {
  if (route.meta.activeMenu) {
    return route.meta.activeMenu
  }
  else if (route.meta.isHide) {
    const parentPath = route.path.slice(0, route.path.lastIndexOf('/'))
    return parentPath
  }
  else {
    return route.path
  }
})
const activePath = ref('')
const subMenuList = ref<Menu.MenuOptions[]>([])
watch(
  () => [menuList, route],
  () => {
    if (!menuList.value.length)
      return
    activePath.value = route.path
    const menuItem = menuList.value.filter((item: Menu.MenuOptions) => route.path.includes(item.path))
    if (menuItem[0].children?.length)
      return (subMenuList.value = menuItem[0].children)
    subMenuList.value = []
  },
  {
    deep: true,
    immediate: true,
  },
)
function changeSubMenu(item: Menu.MenuOptions) {
  activePath.value = item.path
  if (item.children?.length)
    return (subMenuList.value = item.children)
  subMenuList.value = []
  router.push(item.path)
}
function isTitleOverflow(title: string): boolean {
  return getStrWidth(title) > 60
}
</script>

<template>
  <el-container>
    <div class="menu flex">
      <div class="imitate-border-right first-menu" :class="{ 'dark-aside': isDarkMenu }">
        <Logo :show-title="false" />
        <el-scrollbar>
          <div class="first-menu-list flex-1">
            <div
              v-for="item in menuList"
              :key="item.path"
              class="first-menu-item h-70px flex-center flex-col cursor-pointer overflow-hidden px-1 text-[var(--el-menu-text-color)] duration-300"
              :class="[{
                'is-active': route.path.startsWith(item.path),
                'is-focus': activePath.startsWith(item.path),
              }]"
              @click="changeSubMenu(item)"
            >
              <i :class="item.meta.icon" text-xl />
              <!-- 菜单文本溢出处理 -->
              <el-tooltip v-if="isTitleOverflow(item.meta.title)" :content="item.meta.title" placement="right">
                <span class="title mt-2 w-full truncate text-xs">{{ item.meta.title }}</span>
              </el-tooltip>
              <span v-else class="title mt-2 w-full truncate text-center text-xs">{{ item.meta.title }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <!-- 展开栏 -->
      <el-aside
        :class="{ 'is-hide': !subMenuList.length }"
        :style="{ width: isCollapse ? '50px' : '180px' }"
      >
        <Logo :show-logo="false" />
        <el-scrollbar>
          <el-menu
            :router="false"
            :default-active="activeMenu"
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <SubMenu :menu-list="subMenuList" />
          </el-menu>
        </el-scrollbar>
      </el-aside>
    </div>
    <el-container direction="vertical">
      <HeaderWrap>
        <ToolBarLeft />
        <ToolBarRight />
      </HeaderWrap>
      <Main />
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
@import './index.scss';
@import '../styles/el-menu.scss';
@import '../styles/menu-card.scss';
.menu {
  box-shadow: 1px 0 2px rgb(0, 21, 41, 0.08);
  z-index: 11;
}
.is-focus {
  background-color: #409eff66 !important;
}
</style>
